<template>
  <div class="wrap">
    <dialog-label class="text-14">
      {{$t('message.InterferenceCheckDlg.dlgTextToBeCheckedIns')}}
    </dialog-label>
    <div class="d-flex align-items-center">
      <query-list
        v-model="params.instances"
        :description="$t('message.InterferenceCheckDlg.dlgTextToBeCheckedIns')"
        :active="params.queryListActiveMap.instances"
        @highlight="highlight($event)"
        @removeHighlight="removeHighlight($event)"
        :tipMsg="$t('message.InterferenceCheckDlg.dlgTipSelectMoreTwoIns')">
      </query-list>
    </div>
    <div class="d-flex mt-2 align-items-center">
      <label class="label">间隙值:</label>
      <el-input v-model="params.gapValue.variableValue"
                type = "number"
                step = "10"
                min = "0.1"/>
      <label class="label">mm</label>
    </div>
    <dialog-label class="text-14">
      {{$t('message.InterferenceCheckDlg.resultList')}}
    </dialog-label>
    <!--todo:梳理样式-->
    <div id="gapList"
         :class="['dialog-query-list', params.resultList.length === 0 ? 'list-warn' : 'list-normal']">
      <div class="query-description" v-if="params.resultList.length === 0">
        {{$t(currentStatusTip)}}
      </div>
      <ul class="result-list text-color1">
        <li :key="item.id"
            v-for="(item,index) in params.resultList"
            @click="selectGapItem(item)"
            @mouseover="showTip(item)"
            @mouseleave="closeTip()">
          <div :class="['result-item', item.unfold ? 'selected-query-li' : '']">
            <i :class="`angle-icon fa fa-angle-${item.unfold ? 'down': 'right'}`"></i>
            <span class="result-item-title text-ellipsis" :title="item.name">{{item.name}}</span>
          </div>
          <div v-if="item.unfold" class="ident" @click.stop>
            <ul class="text-color1">
              <li :key="insItem.instanceId"
                  v-for="(insItem,insIndex) in item.instanceList"
                  @mouseover="highlight(insItem)"
                  @mouseleave="removeHighlight(insItem)"
                  @click="clickInstanceInResult(insItem)"
                  :class="['result-item', selectedItem === insItem ? 'selected-query-li' : '']">
                <span class="result-item-title text-ellipsis" :title="insItem.name">{{insItem.name}}</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <dialog-tip parentId="gapList" positionModel="fixed" :show="isShowTip"
                  :tipMsg="$t('message.CmdHFToolsCheckGap.dlgTipDisplayGapCheckCalResult')"/>
    </div>
<!--    <div class="dialog-row tw-justify-center mt-3">-->
<!--      <el-button id="buttonConfirm"-->
<!--                 type = "primary"-->
<!--                 :title="confirmTip"-->
<!--                 class="dialog-btn"-->
<!--                 size="mini"-->
<!--                 :disabled="!isCalculated"-->
<!--                 style="display:block;margin:0 auto"-->
<!--                 @click="calculate()">-->
<!--        <slot name="confirm">{{$t('message.InterferenceCheckDlg.dlgBtnCalculateTitle')}}</slot>-->
<!--      </el-button>-->
<!--    </div>-->
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        :disabled="!isCalculated"
        @click="calculate">
        {{ $t('message.InterferenceCheckDlg.dlgBtnCalculateTitle') }}
      </el-button>
      <el-button
        size="small"
        @click="close">
        {{ $t('message.InterferenceCheckDlg.dlgBtnCloseTitle') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import {interferenceCheckCommand} from "../../../Command/InterferenceCheck/InterferenceCheckCommand";
import DialogMixin from "../DialogMixin";
const calculateStatusTip = {
  noCalculate: 'message.InterferenceCheckDlg.dlgTipNotCalculate',
  calculating: 'message.InterferenceCheckDlg.dlgTipCalculation',
  NonInterfering: 'message.InterferenceCheckDlg.dlgTipNoInterference'
}
export default {
  mixins: [DialogMixin],
  data: function() {
    return {
      params: {
        instances:[],
        selectedType: 'selSolid',
        isInstance: true,
        //gapValue: 10.0,
        //需要遵循固定的数据类型传输
        gapValue:{
          variableValue:10.0,
          variableName:null
        },
        resultList: [],  //间隙检查计算结果填充
        queryListActiveMap: {
          instances: 1,
          resultList: 0
        }
      },
      currentStatusTip: calculateStatusTip.noCalculate,
      isShowTip: false,
      isCalculated: false,
      selectedItem: null, //resultList列表中的选择项
    };
  },

  mounted() {
    interferenceCheckCommand.init(400,300,270,() => {
      interferenceCheckCommand.handlePickElement((data) => {
        let instanceIds = [];
        this.params.instances.forEach(instanceData =>{
          instanceIds.push(instanceData.instanceId);
        })

        //筛选同id的不进行添加,对instance的id进行区分
        data.element.forEach(elementSelect => {
          interferenceCheckCommand.getTopInstance(elementSelect.instance,(topInstance) =>{
            if(topInstance.data.instance.id && !instanceIds.includes(topInstance.data.instance.id)){
              topInstance.data.instance.instanceId = topInstance.data.instance.id;
              this.$delete(topInstance.data.instance,'id');
              this.params.instances.push(topInstance.data.instance);
              instanceIds.push(topInstance.data.instance.instanceId);
            }
          })
        })
      });
    });
  },

  methods: {
    changePluginContainerHeight() {
      interferenceCheckCommand.changePluginContainerHeight({minWidth: this.$el.clientWidth, maxHeight: this.$el.clientHeight});
    },
    calculate: function() {
      if (!this.isCalculated) {
        return;
      }
      //点击计算设置计算结果的内容为正在计算
      this.currentStatusTip = calculateStatusTip.calculating;

      interferenceCheckCommand.calculateGapCheck(this.params,(data) => {
        if (data?.length === 0) {
          this.currentStatusTip = calculateStatusTip.NonInterfering;
        }
        else
        {
          //Todo,返回结果处理
          this.params.resultList=data;
        }
      })
    },

    close(){
      interferenceCheckCommand.closeActiveCmd();
    },

    showTip(item){
      //todo: 鼠标移动到某一li上方时，在li右边显示tip，目前均在顶端显示
      this.waitEnd = true;
      setTimeout(() => {
        if (this.waitEnd && !item.unfold) {
          this.isShowTip = true;
        }
      }, 500);
    },

    closeTip(){
      this.waitEnd = false;
      this.isShowTip = false;
    },

    //在列表中选择结果
    selectGapItem(item) {
      item.unfold = !item.unfold;
      this.selectedItem = item;

      let resultParam = {
        item: item,
      }
      interferenceCheckCommand.highlightGapCheckResult(resultParam);
    },
    //在结果中选择实例
    clickInstanceInResult(item) {
      this.selectedItem = item;
      let resultParam = {
        item: item,
      }
      interferenceCheckCommand.highlightGapCheckResult(resultParam);
    },
    //高亮选择对象
    highlight(item) {

    },

    //移除高亮
    removeHighlight() {

    },
  },

  watch: {
    "params.instances": function () {
      this.isCalculated = this.params.instances.length > 1;
      let instanceIds = [];
      this.params.instances.forEach(instanceData =>{
        instanceIds.push(instanceData.instanceId);
      })

      //对所有选取元素进行移除高亮，并对当前选取的实例进行高亮
      interferenceCheckCommand.clearAllHighLight();
      interferenceCheckCommand.highLightInstances(instanceIds);
    },
    "params.gapValue": function () {
      this.isCalculated = this.params.instances.length > 1;
    }
  },

};
</script>
<style scoped>
.wrap {
    font-size: 12px;
}
.query-description {
    height: 24px;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 3px;
}
/*.label {*/
/*    max-width: 100px;*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*}*/
.result-list {
    padding: 2px 10px;
    max-height: 180px;
    overflow-y: auto;
}

.result-item {
    margin: 1px 0;
    padding: 2px 0 2px 4px;
    display: flex;
    align-items: center;
}

.result-item .angle-icon {
    font-weight: bold;
    padding: 0 2px;
}

.result-item-title {
    flex-grow: 1;
}

.ident {
    padding-left: 14px;
}

.selected-query-li {
    border-radius: 3px;
    background-color: var(--bg-color3);
}
</style>
